<template>
    <div>
        <!-- 控制tab选项 -->
        <Tab :lists="lists" @titleChange="titleChangeTodo"></Tab>
        <!-- 控制内容 -->
        <div>{{contents[currentIndex]}}</div>
    </div>
</template>

<script>
import Tab from './Tab.vue'
export default {
    components: { Tab },
    data(){
        return {
            currentIndex: 0,
            lists:[
                "首页",
                "商城",
                "个人主页"
            ],
            contents:[
                "首页页面",
                "商城页面",
                "个人主页页面"
            ]
        }
    },
    methods:{
        titleChangeTodo(index){
            this.currentIndex = index
        }
    }
}
</script>

<style lang="scss" scoped>
</style>